
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:我发布的作品【图文】
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->
<template>
	<view>
		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		<view class="head">
		<view class="left-wrapper" @click="back">
			<uni-icons color="#000000" class="back" size="30" type="arrowleft" />
		</view>
			<view class="search-wrapper">
				<view>我的帖子</view>
			</view>
			<view class="right-wrapper" @click="rightClick">

			</view>
		</view>
		<view class="content" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
			<view class="text-image-item" v-for="(item,key) in items" :key='key' @click="toTextImage(item)" hover-class="view-hover">
				<view class="text-image-head-wrapper">
					<view @click.stop="()=>{}">
						<image class="text-image-head" :src="formatUrl(item.head_img,5)" @click="tapAvater(''+item.uid)" mode="aspectFill"></image>
					</view>
					<view class="text-image-name-wrapper">
						<text class="text-image-name">{{item.name}}</text>
						<text class="text-image-time">{{$utils.timeago(item.create_time)}}</text>
					</view>

					<view class="text-image-down-wrapper" @click.stop="deleteData(key)">
						<uni-icons color="rgba(0,0,0,0.3)" class="back" size="25" type="trash" />
					</view>

				</view>
				<view v-if="item.type==0" class="text-image-content-wrapper">
					<text class="text-image-content">
						{{subContent(item.content)}}
					</text>
				</view>
				<view v-if="item.type==1" class="text-image-images-wrapper" @click.stop="()=>{}">
					<text class="text-image-content-text">
						{{subContent(item.content)}}
					</text>
					<image v-for="(img,i) in StringtoArray(item.images)" :key="i" :src="formatUrl(img,5)" mode="aspectFill" class="text-image-images"
					 :class="{'.text-image-images-3':StringtoArray(item.images).length>=3}" @click="previmg(StringtoArray(item.images),i)">
					</image>
				</view>
				<view class="text-image-menu">
					<view class="text-image-menu-item">
						<image class="text-image-menu-icon" src="/static/text_image_icon/share_black.png" mode="aspectFit"></image>
						<text class="text-image-menu-count">{{item.share_count}}</text>
					</view>
					<view class="text-image-menu-item">
						<image class="text-image-menu-icon" src="/static/text_image_icon/message_black.png" mode="aspectFit"></image>
						<text class="text-image-menu-count">{{item.comment_count}}</text>
					</view>
					<view class="text-image-menu-item" @click.stop="tapNegative(key)">
						<image class="text-image-menu-icon" :src="item.negative!=0?'/static/text_image_icon/negative_red.png':'/static/text_image_icon/negative_black.png'"
						 mode="aspectFit"></image>
						<text class="text-image-menu-count" :class="{active:item.negative!=0}">{{item.negative_count}}</text>
					</view>
					<view class="text-image-menu-item" @click.stop="tapLove(key)">
						<image class="text-image-menu-icon" :src="item.skr!=0?'/static/text_image_icon/skr_red.png':'/static/text_image_icon/skr_black.png'"
						 mode="aspectFit"></image>
						<text class="text-image-menu-count" :class="{active:item.skr!=0}">{{item.skr_count}}</text>
					</view>
				</view>
			</view>
			<view :style="{'textAlign':'center'}" class="loading">
				<text v-if="!tabList[active].isMore">暂无更多数据</text>
				<text v-if="tabList[active].isMore">正在加载...</text>
			</view>

		</view>

	</view>
</template>

<script>
	import refresh from '@/components/refresh/refresh.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniIcons,
			uniPopup,
			refresh
		},
		data() {
			return {
				selected: false,
				show: false,
				popTitle: '',
				popPlaceholder: '',
				type: '',
				content: "",
				items: [],
				page: 1,
				isMore: true,
				loadmore: false,
				selectedIds: []
			}
		},
		created() {
			this.loadData()
		},
		computed: {
			user() {
				return this.$store.state.user;
			}
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			deleteData(index) {
				uni.showModal({
					title: '警告',
					content: '删除后不可恢复，是否删除该信息？',
					showCancel: true,
					cancelText: '否',
					confirmText: '是',
					success: res => {
						if (res.confirm) {
							let item = this.items[index];
							this.$api.textImageDelete({
								ids: [item.id]
							}).then((res) => {
								if (res.data.code == 0) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
									return;
								}
								uni.showToast({
									title: '删除成功'
								});
								
								
							})
						}
					},
					fail: () => {},
					complete: () => {
						this.loadData();
					}
				});

			},
			subContent(text) {
				if (text == undefined ) {
					return;
				}
				return text.slice(0, 80) + (text.length > 50 ? "......" : "")
			},
			previmg(urls, index) {
				urls = urls.map((item, key) => {
					return this.formatUrl(item)
				})
				console.log("预览图片", urls, index);
				uni.previewImage({
					current: index,
					indicator: "default",
					urls: urls,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							switch (data.tapIndex) {
								case 0: //保存图片
									uni.downloadFile({
										url: urls[data.index],
										success: (res) => {
											if (res.statusCode === 200) {
												uni.saveImageToPhotosAlbum({
													filePath: res.tempFilePath,
													success: function() {
														uni.showToast({
															title: "保存成功"
														});
													},
													fail: function() {
														uni.showToast({
															title: "保存失败，请稍后重试",
															icon: "none"
														});
													}
												});
											}
										}
									})
									break;
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			StringtoArray(images) {
				if (images == undefined || images == "") {
					return [];
				}
				return images.split(",");
			},

			loadMore() {
				if (this.isMore) {
					this.loadmore = true;
					// 初始化视频列表
					this.$api.textImageUserList({
						'type': '',
					}).then(res => {
						this.$refs.refresh.endAfter() //刷新结束调用
						if (res.data.code == 0) {
							this.items = this.items.concat(res.data.data);

						} else {
							this.isMore = false;
						}
						this.loadmore = false;
					}).catch(res => {
						this.isMore = false;
						this.loadmore = false;
						this.$refs.refresh.endAfter() //刷新结束调用
						// 失败进行的操作
					})
				} else {
					this.loadmore = true;
					uni.showToast({
						title: '暂无更多数据'
					});
				}

			},
			refresh() {
				this.loadData();
			},
			isRefresh() {
				this.refresh();
			},
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},

			formatUrl(url, scale) {
				if (!scale) {
					scale = 1;
				}
				if (url == undefined) {
					return "";
				}
				var index = url.indexOf("http");
				if (index == 0) {
					return url;
				}
				return this.$store.state.baseUrl + "/thumb/" + scale + "?url=" + url;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			loadData() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.selectedIds = [];
				this.selected = false;
				this.isMore = true;
				this.page = 1;
				//获取视频信息
				this.$api.textImageUserList({
					'type': '',
				}).then((res) => {
					this.loadmore = false
					uni.hideLoading()
					this.$refs.refresh.endAfter() //刷新结束调用
					if (res.data.code == 1) {

						return;
					}
					this.items = res.data.data;
					console.log("length:", res.data.data.length);
					if (res.data.data.length < 20) {
						this.isMore = false;
					}

				}).catch(res => {
					this.isMore = false;
					uni.hideLoading()
					this.$refs.refresh.endAfter() //刷新结束调用
				})
			},
			checkboxChange(e) {
				var items = this.items,
					id = e.detail.id;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (id === item.id) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			toTextImage(item) {
				uni.navigateTo({
					url: '/pages/index/iliao/iliao',
					success: res => {
						uni.$emit('setTextImageData', item);
					},
					fail: () => {},
					complete: () => {}
				});
				return false;
			},

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background: $uni-bg-color-content;
	}

	.head {

		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.12);
		// background-color: red;
	}

	.left-wrapper {
		margin-left: 12rpx;
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;


		image {
			margin-right: 24rpx;
			display: inline-block;
			width: 35rpx;
			height: 35rpx;
		}
	}

	.search-wrapper {
		text-align: center;
		line-height: 76rpx;
		height: 76rpx;
		// background: #09BB07;
		flex: 10;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;

		text {
			line-height: 76rpx;
			height: 76rpx;
		}
	}

	.search {
		height: 88rpx;

		line-height: 88rpx;
		flex: 1;
	}

	.content {

		height: 800rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-top: 88rpx;
		padding-bottom: 123rpx;
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif
		height: 100%;
		width: 100vw;
	}

	.text-image-item:first-child {
		padding-top: 12rpx;
	}
	.text-image-content-text {
		width: 100%;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 46rpx;
		margin-bottom: 24rpx;
	}
	.text-image-item {
		margin-bottom: 12rpx;
		background: white;
		display: flex;
		flex-direction: column;
		padding: 0 24rpx;
		justify-content: center;
	}

	.text-image-head-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		position: relative;
	}

	.text-image-head {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
	}

	.text-image-name-wrapper {
		margin-left: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.text-image-name {
		font-size: 27rpx;
		font-family: PingFang SC;

		margin-bottom: 5rpx;
		color: rgba(0, 0, 0, 1);
	}

	.text-image-time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.5);
		line-height: 12px;
	}

	.text-image-down-wrapper {
		padding: 0 20rpx;
		height: 100%;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.text-image-down {
		width: 30rpx;
		height: 20rpx;
	}

	.text-image-content-wrapper {
		margin-top: 24rpx;
		margin-bottom: 30rpx;
	}

	.text-image-content {
		width: 100%;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 46rpx;
	}

	.text-image-menu {
		margin-bottom: 25rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text-image-menu-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.text-image-menu-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
	}

	.text-image-menu-count {
		font-size: 24rpx;
		margin-left: 12rpx;
		padding-bottom: 5rpx;
	}

	.text-image-images-wrapper {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: -12rpx;
	}


	.text-image-images-3 {
		max-height: 220rpx;
		max-width: 30vw;
	}

	.text-image-images {
		margin-right: 12rpx;
		flex: 4;
		min-width: 30vw;
		margin-bottom: 12rpx;
	}
</style>
